<template>
<div class="footer">
  <tabbar>
    <tabbar-item link="/home" :selected="$route.path == '/home'">
      <img class="img1" slot="icon" src="../../assets/images/shouye@2x.png"> 
      <img class="img1" slot="icon-active" src="../../assets/images/shouyexuabzhong@2x.png" width="20.5" height="22"> 
      <span slot="label">首页</span>
    </tabbar-item>
    <tabbar-item link="/supervisor" :selected="$route.path == '/supervisor'">
      <img class="img2" slot="icon" src="../../assets/images/jianli-weixuanzhong@2x.png" width="15.5" height="22"> 
      <img class="img2" slot="icon-active" src="../../assets/images/jianli-xuanzhong@2x.png" width="15.5" height="22"> 
      <span slot="label">监理</span>
    </tabbar-item>
    <tabbar-item link="/publish" :selected="$route.path == '/publish'">
      <img style="height:40px;width:40px;" slot="icon" src="../../assets/images/fabu.png">
    </tabbar-item>
    <tabbar-item link="/message" :selected="$route.path == '/message'">
      <img class="img3" slot="icon" src="../../assets/images/luntan@2x.png" width="22.5" height="22">  
      <img class="img3" slot="icon-active" src="../../assets/images/luntan-xuanzhong@2x.png" width="22.5" height="22">
      <span slot="label">论坛</span>
    </tabbar-item>
    <tabbar-item link="/my" :selected="$route.path == '/my'">
      <img class="img4" slot="icon" src="../../assets/images/wodeweixuanzhong@2x.png" width="17" height="22">
      <img class="img4" slot="icon-active" src="../../assets/images/wodexuanzhong@2x.png" width="17" height="22">          
      <span slot="label">我的</span>
    </tabbar-item> 
  </tabbar>
</div>
</template>
<style lang="scss">
.footer{
  margin-top: 48px;
  .weui-tabbar__icon{
    width: auto;
    height: auto;
  }
  .weui-tabbar__icon .img1{
    width: 22.5px;
    height: 22px;
  }
  .weui-tabbar__icon .img2{
    width: 15.5px;
    height: 22px;
  }
  .weui-tabbar__icon .img3{
    width: 22.5px;
    height: 22px;
  }
  .weui-tabbar__icon .img4{
    width: 17px;
    height: 22px;
  }
  .weui-tabbar{
    position: fixed;
  }
  .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color: #0078de;
  }
  .weui-tabbar__label{
    font-size: 15px;
  }
}

</style>
<script>
  import {Tabbar, TabbarItem} from 'vux'
  export default {
    name: 'AppFooter',
    components: {
      Tabbar,
      TabbarItem
    },
    data () {
      return {
        msg: ''
      }
    }
  }
</script>
